<template>
  <div
    class="banner"
    :class="{
      'with-banner-1': style1,
      'with-banner-2': style2
    }"
    flex="dir:top main:center cross:top"
  >
    <p class="banner--title">
      {{ title }}
    </p>
    <p class="banner--sub-title">
      {{ subTitle }}
    </p>
  </div>
</template>

<script>
  export default {
    name: 'PageBanner',
    props: {
      title: {
        type: String,
        default: '',
      },
      subTitle: {
        type: String,
        default: '',
      },
      link: {
        type: String,
        default: '',
      },
      style1: {
        type: Boolean,
        required: false,
        default: false,
      },
      style2: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      handleLinkClick () {
        this.$open(this.link)
      },
    },
  }
</script>

<style lang="scss" scoped>
.banner {
  &.with-banner-1 {
    height: 120px;
    padding-left: 20px;
    border: 1px solid #0054b5;
    border-radius: 2px;
    background-color: #0077ff;
    background-size: 120px;
    .banner--title {
      margin: 0px;
      padding: 0px;
      margin-left: -8px;
      font-size: 48px;
      line-height: 60px;
      font-weight: bold;
      color: #FFF;
    }
    .banner--sub-title {
      margin: 0px;
      padding: 0px;
      font-size: 16px;
      color: #FFF;
    }
  }
  &.with-banner-2 {
    height: 60px;
    padding-left: 20px;
    border: 1px solid #0054b5;
    border-radius: 2px;
    background-color: #0077ff;
    background-size: 60px;
    .banner--title {
      margin: 0px;
      padding: 0px;
      margin-left: -8px;
      font-size: 24px;
      line-height: 30px;
      font-weight: bold;
      color: #FFF;
    }
    .banner--sub-title {
      margin: 0px;
      padding: 0px;
      font-size: 8px;
      color: #FFF;
    }
  }
}
</style>
